import React, {Component} from 'react';
import {Form, Input, Modal, Button, Select} from 'antd';
import '../style.less';
import {FetchAPI} from "../../../utils/fetch-middleware";

const FormItem = Form.Item;
const Option = Select.Option;

@Form.create()
export default class TeachersDetail extends Component {
	state = {
		visible: false,
		currentData: {},
	}

	componentWillMount() {
		if (this.props.visible) {
			this.setDate(this.props.visible, this.props.currentData);
		}
	}

	componentWillReceiveProps(nextProps) {
		if (this.state.visible !== nextProps.visible) {
			this.setDate(nextProps.visible, nextProps.currentData);
		}
	}

	setDate = (visible, currentData) => {
		this.setState({
			visible,
			currentData: currentData || {},
		});
	}

    onSave = () => {
        console.log('save');
        this.props.form.validateFieldsAndScroll((err, value) => {
            if (!err) {
                debugger;
                FetchAPI('/api/teacher/update', 'POST', Object.assign(this.state.currentData, value)).then(result => {
                    if(result.code === 'ACM0014'){
                        Modal.success({
                            title: result.code,
                            content: '标记成功～',
                        });
                    } else {
                        Modal.warning({
                            title: result.code,
                            content: result.message,
                        });
                    }

                }, err => {
                    Modal.error({
                        title: 'WRONG',
                        content: '系统内部错误，请联系管理员',
                    });
                });
            }
        });
    }

	handleCancel = () => {
		this.props.handleCancel();
		this.props.form.resetFields();
	}

	render() {
		const {visible, currentData} = this.state;
		const {getFieldDecorator} = this.props.form;
		const formLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 18},
            },
            style: {
                marginBottom: '8px',
            },
        };
		return (
			<div>
				<Modal
					title="教师信息详情"
					visible={visible}
                    onCancel={this.handleCancel}
                    footer={null}
                    className="detail"
				>
					<Form>
						<FormItem label="姓名" {...formLayout}>
							{getFieldDecorator('name', {
								rules: [{required: true, message: 'must'}],
								initialValue: currentData.name,
							})(
								<Input />
							)}
						</FormItem>
                        <FormItem label="工号" {...formLayout}>
                            {getFieldDecorator('acNo', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.acNo,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="职称" {...formLayout}>
                            {getFieldDecorator('title', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.title,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="性别" {...formLayout}>
                            {getFieldDecorator('sex', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.sex === '1' ? '男' : '女'
                            })(
                                <Select style={{with: 140}}>
                                    <Option value="1">男</Option>
                                    <Option value="0">女</Option>
                                </Select>
                            )}
                        </FormItem>
                        <FormItem label="手机号" {...formLayout}>
                            {getFieldDecorator('phone', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.phone,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="身份证号" {...formLayout}>
                            {getFieldDecorator('cardId', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.cardId,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="教研室" {...formLayout}>
                            {getFieldDecorator('profession', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.profession,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="邮箱" {...formLayout}>
                            {getFieldDecorator('email', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.email,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="研究方向" {...formLayout}>
                            {getFieldDecorator('direction', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.direction,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="备注" {...formLayout}>
                            {getFieldDecorator('memo', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.memo,
                            })(
                                <Input />
                            )}
                        </FormItem>
						<FormItem className="btn-item">
							<Button onClick={() => this.onSave(currentData)} type="primary">保存</Button>
						</FormItem>
					</Form>
				</Modal>
			</div>
		);
	}
}
